<!DOCTYPE html>
<html>
	<head>
		<title>Hiding columns while the split mode</title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class='header_comment'>Hiding columns while the split mode</div>
		<div class='sample_comment'>The sample shows how DataTable containing 'frosen' columns behaves when you hide(show) some column.</div>
		<div id="testA" style='width:800px'></div>
		<hr>
		<input type='button' class='sample_button' value='Hide 1st' onclick='change("rank", this);'>
		<input type='button' class='sample_button' value='Hide 2nd' onclick='change("title", this);'>
		<input type='button' class='sample_button' value='Hide January' onclick='change("2008_1", this);'>
		<input type='button' class='sample_button' value='Hide February' onclick='change("2008_2", this);'>
		<input type='button' class='sample_button' value='Hide March' onclick='change("2008_3", this);'>
		<input type='button' class='sample_button' value='Hide April' onclick='change("2008_4", this);'>
		<input type='button' class='sample_button' value='Hide May' onclick='change("2008_5", this);'>
		<input type='button' class='sample_button' value='Hide pre-last' onclick='change("year", this);'>
		<input type='button' class='sample_button' value='Hide last' onclick='change("votes", this);'>



		<script type="text/javascript" charset="utf-8">
		function change(name, node){
			if (grid.getColumnIndex(name) == -1){
				grid.showColumn(name);
				node.value = "Hide "+name;
			}
			else {
				grid.hideColumn(name);
				node.value = "Show "+name;
			}			
		}

		webix.ready(function(){
			grid = new webix.ui({
				container:"testA",
				view:"datatable",
				columns:[
					{ id:"rank",	header:"", css:"rank",  		width:50},
					{ id:"title",	header:"Film title",width:200},

					{ id:"2008_1", header:["January"] },
					{ id:"2008_2", header:[ "February"] },
					{ id:"2008_3", header:[ "March"] },
					{ id:"2008_4", header:[ "April"] },
					{ id:"2008_5", header:[ "May"] },
					{ id:"2008_6", header:[ "June"] },
					{ id:"2008_7", header:[ "July"] },
					{ id:"2008_8", header:[ "August"] },
					{ id:"2008_9", header:[ "September"] },
					{ id:"2008_10", header:[ "October"] },
					{ id:"2008_11", header:[ "November"] },
					{ id:"2008_12", header:[ "December"] },

					{ id:"year",	header:"Released" , width:80},
					{ id:"votes",	header:"Votes", 	width:100}
				],

				select:"cell",
				blockselect:true,
				multiselect:true,

				rightSplit:2,
				leftSplit:2,

				autoheight:true,
				data:small_wide_film_set
			});
	
		});
		</script>
	</body>
</html>